<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.goodList img{
				width: 200px;
				height: 300px;
			}
			.goodInfo{
				display: inline-block;
				width: 200px;
			}
			#buy{
				position: fixed;
				top: 300px;
				right: 0px;
			}
		</style>
	</head>
	<body>
		<div class="goodList">
			<div class="goodInfo" data-good-id="sp1">
				<img src="img/1.jpg"/><br />
				<span>香蕉</span>
				<span>30RMB</span>
				<input type="button" name="" id="" value="加入购物车" class="addToCart"/>
			</div>
			<div class="goodInfo" data-good-id="sp2">
				<img src="img/2.jpg"/><br />
				<span>苹果</span>
				<span>40RMB</span>
				<input type="button" name="" id="" value="加入购物车" class="addToCart"/>
			</div>
			<div class="goodInfo" data-good-id="sp3">
				<img src="img/3.jpg"/><br />
				<span>梨</span>
				<span>50RMB</span>
				<input type="button" name="" id="" value="加入购物车" class="addToCart"/>
			</div>
		</div>
		<input type="button" value="购物车(0)" id="buy"/>
		
		
		<script src="js/jquery-1.12.4.min.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/public.js"></script>
		<script src="js/jquery.fly.min.js"></script>
		<script src="js/requestAnimationFrame.js"></script>
		<script>
			function Product(){
				//属性
				this.$cart_btn = $('#buy');
				this.$buy = $('.addToCart');
				this.init();
				this.addEvent();
			}
			Product.prototype = {
				constructor : Product,
				addEvent(){
					let that = this;
					this.$cart_btn.on('click',function(){
						location.href = 'cart.html';
					})
					this.$buy.each(function(){
						$(this).click(function(event){
							//商品id
							let good_id = $(this).parent().attr('data-good-id');
							//商品名称
							let good_name = $(this).prev().prev().text();
							//商品价格
							let good_price = parseInt($(this).prev().text());
							//商品src
							let good_src = $(this).siblings('img').attr('src');

							//获取cookie中的商品
							/*
								key : carts
								value : 
								{
									"sp1" : {

									}
								}
							*/
							let cookie_str = $.cookie('carts') ? $.cookie('carts') : '';
							let cookie_obj = convertStrToObj(cookie_str);
							//判断当前商品是否在购物车中
							if(good_id in cookie_obj){
								//找到数量 + 1
								cookie_obj[good_id].num ++;
							}else{
								cookie_obj[good_id] = {
									"name" : good_name,
									"price" : good_price,
									"src" : good_src,
									"num" : 1
								}
							}
							//创建cookie
							$.cookie('carts',JSON.stringify(cookie_obj),{expires : 3,path : '/'});

							//飞入购物车
							let $img = $(this).siblings('img').clone().css({width : 50,height:50});
							$img.fly({  
								start: {  
									left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed  
									top: event.pageY //开始位置（必填）  
								},  
								end: {  
									left: that.$cart_btn.offset().left, //结束位置（必填）  
									top: that.$cart_btn.offset().top, //结束位置（必填）  
									width: 0, //结束时宽度  
									height: 0 //结束时高度  
								},  
								onEnd: function(){ //结束回调  
									let num = /(\d+)/.exec(that.$cart_btn.val())[1];
									that.$cart_btn.val(`购物车(${++ num})`);
								}  
							});  
						})
					})
				},
				init(){
					let cookie_str = $.cookie('carts') ? $.cookie('carts') : '';
					let cookie_obj = convertStrToObj(cookie_str);
					let sum = 0;
					for(let key in cookie_obj){
						sum += cookie_obj[key].num;
					}
					this.$cart_btn.val(`购物车(${sum})`);
				}
			}
			new Product();
		</script>
	</body>
</html>
